<template>
  <div class="parking-statistics">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2>停车统计分析</h2>
        <el-button type="primary" @click="handleRefresh">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>

      <!-- 统计概览卡片 -->
      <div class="statistics-overview">
        <el-row :gutter="16">
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ overview.totalLots }}</div>
                <div class="stat-label">停车场总数</div>
              </div>
              <el-icon class="stat-icon"><Location /></el-icon>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ overview.totalSpaces }}</div>
                <div class="stat-label">车位总数</div>
              </div>
              <el-icon class="stat-icon"><Grid /></el-icon>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ overview.occupancyRate }}%</div>
                <div class="stat-label">平均使用率</div>
              </div>
              <el-icon class="stat-icon"><TrendCharts /></el-icon>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="stat-card">
              <div class="stat-content">
                <div class="stat-number">{{ overview.todayIncome }}</div>
                <div class="stat-label">今日收入</div>
              </div>
              <el-icon class="stat-icon"><Money /></el-icon>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 图表区域 -->
      <div class="charts-section">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>停车场使用率趋势</span>
                  <el-select v-model="selectedTimeRange" size="small" @change="handleTimeRangeChange">
                    <el-option label="最近7天" value="7" />
                    <el-option label="最近30天" value="30" />
                    <el-option label="最近90天" value="90" />
                  </el-select>
                </div>
              </template>
              <div class="chart-container">
                <div ref="usageChartRef" class="chart"></div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>收入统计</span>
                </div>
              </template>
              <div class="chart-container">
                <div ref="incomeChartRef" class="chart"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 详细统计表格 -->
      <el-card class="table-card">
        <template #header>
          <div class="card-header">
            <span>停车场详细统计</span>
            <el-button type="primary" size="small" @click="exportStatistics">
              <el-icon><Download /></el-icon>
              导出统计
            </el-button>
          </div>
        </template>
        
        <el-table 
          v-loading="tableLoading" 
          :data="parkingLotStats"
          stripe
          border
        >
          <el-table-column prop="lotName" label="停车场名称" min-width="150" />
          <el-table-column prop="totalSpaces" label="总车位数" width="100" />
          <el-table-column prop="availableSpaces" label="空闲车位数" width="120" />
          <el-table-column prop="occupiedSpaces" label="占用车位数" width="120" />
          <el-table-column prop="occupancyRate" label="使用率" width="100">
            <template #default="{ row }">
              <el-progress 
                :percentage="row.occupancyRate" 
                :stroke-width="8"
                :show-text="false"
              />
              <span class="rate-text">{{ row.occupancyRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="todayIncome" label="今日收入" width="120">
            <template #default="{ row }">
              ¥{{ row.todayIncome }}
            </template>
          </el-table-column>
          <el-table-column prop="monthlyIncome" label="本月收入" width="120">
            <template #default="{ row }">
              ¥{{ row.monthlyIncome }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="viewLotDetail(row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, onUnmounted } from 'vue'
import { showMessage } from '@/utils/message'
import { Refresh, Location, Grid, TrendCharts, Money, Download } from '@element-plus/icons-vue'

import * as echarts from 'echarts'

// 作者：Wu.Liang

// 响应式数据
const tableLoading = ref(false)
const selectedTimeRange = ref('7')
const usageChartRef = ref()
const incomeChartRef = ref()

// 静态统计数据
const overview = reactive({
  totalLots: 8,
  totalSpaces: 1200,
  occupancyRate: 75.5,
  todayIncome: 12580.50
})

// 静态停车场统计数据
const parkingLotStats = ref([
  {
    lotName: 'A区停车场',
    totalSpaces: 200,
    availableSpaces: 50,
    occupiedSpaces: 150,
    occupancyRate: 75,
    todayIncome: 3200.00,
    monthlyIncome: 85600.00
  },
  {
    lotName: 'B区停车场',
    totalSpaces: 150,
    availableSpaces: 30,
    occupiedSpaces: 120,
    occupancyRate: 80,
    todayIncome: 2800.00,
    monthlyIncome: 72000.00
  },
  {
    lotName: 'C区停车场',
    totalSpaces: 180,
    availableSpaces: 45,
    occupiedSpaces: 135,
    occupancyRate: 75,
    todayIncome: 2900.00,
    monthlyIncome: 78000.00
  },
  {
    lotName: 'D区停车场',
    totalSpaces: 120,
    availableSpaces: 20,
    occupiedSpaces: 100,
    occupancyRate: 83.3,
    todayIncome: 2100.00,
    monthlyIncome: 56000.00
  },
  {
    lotName: 'E区停车场',
    totalSpaces: 100,
    availableSpaces: 15,
    occupiedSpaces: 85,
    occupancyRate: 85,
    todayIncome: 1800.00,
    monthlyIncome: 48000.00
  }
])

// 图表实例
let usageChart: echarts.ECharts | null = null
let incomeChart: echarts.ECharts | null = null

// 页面加载时初始化
onMounted(() => {
  nextTick(() => {
    initCharts()
  })
})

// 初始化图表
const initCharts = () => {
  initUsageChart()
  initIncomeChart()
}

// 初始化使用率趋势图
const initUsageChart = () => {
  if (!usageChartRef.value) return
  
  usageChart = echarts.init(usageChartRef.value)
  const option = {
    title: {
      text: '停车场使用率趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        name: '使用率',
        type: 'line',
        data: [65, 70, 75, 80, 85, 90, 85],
        smooth: true,
        itemStyle: {
          color: '#409EFF'
        }
      }
    ]
  }
  usageChart.setOption(option)
}

// 初始化收入统计图
const initIncomeChart = () => {
  if (!incomeChartRef.value) return
  
  incomeChart = echarts.init(incomeChartRef.value)
  const option = {
    title: {
      text: '收入统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '收入来源',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '停车费' },
          { value: 735, name: '充电费' },
          { value: 580, name: '月租费' },
          { value: 484, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  incomeChart.setOption(option)
}

// 时间范围变化
const handleTimeRangeChange = () => {
  showMessage({ type: 'success', message: `已切换到最近${selectedTimeRange.value}天数据` })
}

// 刷新数据
const handleRefresh = () => {
  showMessage({ type: 'success', message: '数据已刷新' })
  nextTick(() => {
    if (usageChart) {
      usageChart.resize()
    }
    if (incomeChart) {
      incomeChart.resize()
    }
  })
}

// 查看停车场详情
const viewLotDetail = (row: any) => {
  showMessage({ type: 'success', message: `查看停车场详情：${row.lotName}` })
}

// 导出统计
const exportStatistics = () => {
  showMessage({ type: 'success', message: '统计报告导出成功，文件已下载到本地' })
}

// 组件卸载时清理图表
onUnmounted(() => {
  if (usageChart) {
    usageChart.dispose()
  }
  if (incomeChart) {
    incomeChart.dispose()
  }
})
</script>

<style scoped lang="scss">
.parking-statistics {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    color: #303133;
  }
}

.statistics-overview {
  margin-bottom: 20px;

  .stat-card {
    .stat-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;

      .stat-number {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 8px;
      }

      .stat-label {
        font-size: 14px;
        color: #909399;
      }
    }

    .stat-icon {
      font-size: 32px;
      color: #409EFF;
      margin-left: 16px;
    }
  }
}

.charts-section {
  margin-bottom: 20px;

  .chart-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .chart-container {
      height: 300px;

      .chart {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.table-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .rate-text {
    margin-left: 8px;
    font-size: 12px;
    color: #606266;
  }
}
</style> 